<template>
  <div class="mod-service-notifyTemplate">
    <!-- <div class="screening-conditions">
      <el-divider direction="vertical" class="lines"></el-divider>
      <span style="fontSize:18px;text-align:center">{{$t('platform.sendMsgRecord')}}</span>
    </div> -->
    <div class="search-bar search-bar-box">
      <el-form
        :inline="true"
        :model="dataForm"
        @submit.prevent
        @keyup.enter="getDataList(page)"
      >
        <div class="input-row margin-bottom-none">
          <el-form-item
            :label="$t('platform.sendTime') + ':'"
            class="search-form-item"
          >
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              :range-separator="$t('date.tip')"
              value-format="YYYY-MM-DD HH:mm:ss"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
            />&nbsp;&nbsp;&nbsp;
            <div
              class="default-btn"
              @click="setDateRange(1)"
            >
              {{ $t('date.t') }}
            </div>
            <div
              class="default-btn"
              @click="setDateRange(2)"
            >
              {{ $t('date.y') }}
            </div>
            <div
              class="default-btn"
              @click="setDateRange(3)"
            >
              {{ $t('date.n') }}
            </div>
            <div
              class="default-btn"
              @click="setDateRange(4)"
            >
              {{ $t('th') }}
            </div>
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t('order.query') }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con prod-table">
        <el-table
          :data="dataList"
          stripe
          style="width: 100%"
          header-cell-class-name="table-header"
          row-key="key"
          row-class-name="table-row-low"
        >
          <el-table-column
            :label="$t('formData.serialNumber')"
            type="index"
            width="60"
            :index="1"
          />
          <el-table-column
            prop="message"
            :label="$t('platform.notifyConten')"
            width="400"
          >
            <template #default="scope">
              <div class="table-cell-text">
                {{ scope.row.message }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shopName"
            :label="$t('prodList.shopName')"
            width="auto"
          >
            <template #default="scope">
              <span
                v-if="scope.row.sendType === 10"
                type="small"
              >{{ $t('platform.platform') }}</span>
              <span v-else>{{ scope.row.shopName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            :label="$t('platform.senduserName')"
            width="auto"
          />
          <el-table-column
            prop="userMobile"
            :label="$t('platform.sendPhoNum')"
            width="auto"
          >
            <template #default="scope">
              <span>{{ scope.row.userMobile ? scope.row.userMobile : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remindType"
            width="auto"
            :label="$t('platform.notifyType')"
          >
            <template #default="scope">
              <span v-if="scope.row.remindType === 1">{{ $t("platform.msgNotifyFree") }}</span>
              <span v-if="scope.row.remindType === 2">{{ $t("platform.publicNotify") }}</span>
              <span v-if="scope.row.remindType === 3">{{ $t("platform.applet") }}</span>
              <span v-if="scope.row.remindType === 4">企微助手通知</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('platform.sendStatus')"
            width="auto"
          >
            <template #default="scope">
              <span v-if="scope.row.status === 1 || scope.row.remindType === 3">{{ $t("platform.success") }}</span>
              <span v-if="scope.row.status === 0 && scope.row.remindType !== 3">{{ $t("platform.fail") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            :label="$t('platform.sendTime')"
            width="auto"
          />
        </el-table>
      </div>
      <el-pagination
        v-if="dataList.length"
        :current-page="page.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>
<script setup>
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'

let tempSearchForm = null // 保存上次点击查询的请求条件

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const dataForm = reactive({})
const searchForm = reactive({}) // 搜索
const dataListLoading = ref(false)
const dateRange = ref([])
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null)
onMounted(() => {
  getDataList()
  getShopWalletInfo()
})

const getShopWalletInfo = () => {
  // http({
  //   url: http.adornUrl('/shop/shopWallet/info'),
  //   method: 'get',
  //   params: http.adornParams()
  // }).then(({ data }) => {
  //   shopWallet = data
  // })
}
const getDataList = (pageParam, newData = false) => {
  // var date = new Date()
  // var seperator1 = '-'
  // var year = date.getFullYear()
  // var month = date.getMonth() + 1
  // var strDate = date.getDate()
  // var hours = date.getHours()
  // var minutes = date.getMinutes()
  // var seconds = date.getSeconds()
  // if (month >= 1 && month <= 9) {
  //   month = '0' + month
  // }
  // if (strDate >= 0 && strDate <= 9) {
  //   strDate = '0' + strDate
  // }
  // if (hours >= 1 && hours <= 9) {
  //   hours = '0' + hours
  // }
  // if (minutes >= 0 && minutes <= 9) {
  //   minutes = '0' + minutes
  // }
  // if (seconds >= 0 && seconds <= 9) {
  //   seconds = '0' + seconds
  // }
  // nowDate = year + seperator1 + month + seperator1 + strDate + ' ' + hours + ':' + minutes + ':' + seconds
  // nowDate = moment().format('LL')
  dataListLoading.value = true
  if (newData || !tempSearchForm) {
    tempSearchForm = {
      current: pageParam == null ? page.currentPage : pageParam.currentPage,
      size: pageParam == null ? page.pageSize : pageParam.pageSize,
      startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
      endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
    }
  } else {
    tempSearchForm.current = page == null ? page.currentPage : page.currentPage
    tempSearchForm.size = page == null ? page.pageSize : page.pageSize
  }
  http({
    url: http.adornUrl('/platform/notifyLog/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        tempSearchForm,
        searchForm
      )
    )
  }).then(({ data }) => {
    dataList.value = data.records
    dataList.value.forEach(x => {
      x.key = Math.random()
    })
    page.total = data.total
    dataListLoading.value = false
  })
}
// 每页数
const sizeChangeHandle = (val) => {
  page.pageSize = val
  page.currentPage = 1
  getDataList()
}
// 当前页
const currentChangeHandle = (val) => {
  page.currentPage = val
  getDataList()
}
// 新增 / 修改
const onAddOrUpdate = () => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init()
  })
}
/**
 * 根据选项设置时间
 * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
 */
const setDateRange = (val) => {
  let startDay = null
  let endDay = null
  if (val === 1) {
    startDay = 0
    endDay = 0
  } else if (val === 2) {
    startDay = -1
    endDay = -1
  } else if (val === 3) {
    startDay = -7
    endDay = -1
  } else if (val === 4) {
    startDay = -30
    endDay = -1
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days').format('LL')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days').format('LL')
  dateRange.value = [startTime, endTime]
}

const onDelete = (row) => {
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/platform/msgTemplate/' + row.msgTemplateId),
      method: 'delete',
      data: http.adornData({})
    }).then(() => {
      ElMessage({
        message: $t('remindPop.success'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          refreshChange()
        }
      })
    })
  }).catch(() => { })
}
// 搜索查询
const onSearch = (newData = false) => {
  page.currentPage = 1
  getDataList(page, newData)
}
/**
 * 刷新回调
 */
const refreshChange = () => {
  getShopWalletInfo()
}

defineExpose({
  onDelete,
  onAddOrUpdate
})

</script>
<style lang="scss" scoped>
:deep(.mod-service-notifyTemplate) {
  .recharge {
    display: inline-block;
    color: #333;
    font-size: 12px;
    padding: 25px 36px;
    background: rgba(0, 0, 0, 0.04);
  }
  .screening-conditions {
    display: block;
    padding: 8px;
    font-size: 20px;
    background: #f8f8f9;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .divider {
    font-size: 18px;
  }
  .lines {
    width: 3px;
    background: #155bd4;
    margin: 3px;
    height: 18px;
  }
  .title-time {
    display: inline-block;
    color: gray;
    font-size: 15px;
  }
  .search {
    width: 900px;
  }
  .operation-box {
    display: inline-block;
    margin-left: 30px;
  }
  .tit1 {
    margin-bottom: 15px;
    background: #f8f8f9;
    z-index: 11;
  }
  .tit1 .item {
    padding: 0 10px;
    width: 10%;
    text-align: center;
  }
  .tit1 .product {
    width: 25%;
  }
  .overview .show-data .data-board.data-board-left{
    min-width: 865px;
    width: 865px;
  }
}

</style>
